<!DOCTYPE html>
<html ng-app="example">
<head>
	<title>angular-charts demo!</title>
	<style type="text/css">
		body {
			font-family: "helvetica";
			color : #333;
		}
		[ac-chart] {
			float:left;
			width: 48%;
			height: 400px;
			margin: 0 1%;
		}



	</style>
</head>
<body ng-controller="MainController">

	<select ng-model="chartType">
		<option value="pie">pie</option>
		<option value="bar">bar</option>
		<option value="line">line</option>
		<option value="point">point</option>
		<option value="area">area</option>
	</select>

	<span ng-show="chartType==='pie'">
		<label for="innerRadius">Radius:</label>
		<input ng-model="config1.innerRadius" type="number" id="innerRadius" />
	</span>

	<br />

	<div id="chart1" ac-chart="chartType" ac-data="data1" ac-config="config1"></div>

	<div id="chart2" ac-chart="chartType" ac-data="data2" ac-config="config2"></div>

	<script src="../bower_components/angular/angular.min.js"></script>
	<script src="../bower_components/d3/d3.min.js"></script>
	<script src="../dist/angular-charts.js"></script>
    <script src="main.controller.js"></script>

    <!-- styling which overrides defaults must be loaded after "angular-charts.js" -->
    <style>
        .ac-tooltip {
            color: black;
            border: 2px solid rgba(200,200,0,0.8);
            background-color: rgba(200,200,0,0.5);
        }

        #chart1 .ac-legend-box {
            border-radius: 10px;
        }

    </style>
</body>
</html>
